<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    ref="chart"
    v-ui-ref="vSetRef"
    class="ui-line-chart h-full"
    :style="{
      width: '100%',
    }"
  ></div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'UiSanxiaModel2',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponent: {},
        designByUser: [],
        inter: null,
        loopRequest: true,
        loopTime: 5000,
      }
    },
    watch: {},
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {
      if (this.info.extension.firstGetData?.value === false) {
        return
      }
      this.$nextTick(() => {
        this.getRequestData()
        if (this.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData() {
        let obj = {
          requestSet: {
            api: '/wms/wms-web',
            method: 'wms.kanban.analyze.inout30.query',
            getDataKey: 'wms.kanban.analyze.inout30.query',
            loopRequest: false,
            loopTime: 3000,
            nameKey: '',
            valueKey: '',
            busList: [],
            dataObj: {},
            isJson: false,
            data: [
              {
                key: '#LIMIT#',
                value: '1',
              },
              {
                key: '#PAGE_SIZE#',
                value: '50',
              },
            ],
            resList: [],
          },
        }

        this.$request(obj.requestSet, (res) => {
          this.initChart(res)
        })
      },
      initChart(res) {
        const datas = {
          xAxisData: res.map((v) => v.TRANSACTION_TIME),
          series: {
            A: res.map((v) => v.INQTY),
            B: res.map((v) => v.OUTQTY),
          },
          maxNum: [...res.map((v) => v.INQTY), ...res.map((v) => v.OUTQTY)].reduce((prev, next) => Math.max(prev, next)),
        }

        let chartDom = this.$refs.chart
        let myChart = echarts.init(chartDom)
        let option = {
          backgroundColor: '#142543',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '4%',
            top: '16%',
            containLabel: true,
          },
          legend: {
            data: ['1', '2'],
            right: 10,
            top: 12,
            textStyle: {
              color: '#fff',
            },
            itemWidth: 12,
            itemHeight: 10,
          },
          xAxis: {
            type: 'category',
            data: datas.xAxisData,
            axisLine: {
              lineStyle: {
                color: 'white',
              },
            },
            axisLabel: {
              textStyle: {
                fontFamily: 'Microsoft YaHei',
              },
            },
          },

          yAxis: {
            name: '单位(个)',
            nameTextStyle: {
              color: '#fff',
              fontSize: 14,
            },
            type: 'value',
            max: datas.maxNum,
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.3)',
              },
            },
            axisLabel: {},
          },
          series: [
            {
              name: '入库',
              type: 'bar',
              barWidth: '10%',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#69ddd4',
                    },
                    {
                      offset: 1,
                      color: '#4c77dd',
                    },
                  ]),
                  barBorderRadius: 12,
                },
              },
              data: datas.series.A,
            },
            {
              name: '出库',
              type: 'bar',
              barWidth: '10%',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#f4cf5a',
                    },
                    {
                      offset: 1,
                      color: '#f2878d',
                    },
                  ]),
                  barBorderRadius: 11,
                },
              },
              data: datas.series.B,
            },
          ],
        }

        option && myChart.setOption(cloneDeep(option), true)
      },
    },
  })
</script>
<style lang="scss">
  .uiBarChart {
    width: 100%;
    height: 100%;
  }
</style>
